<template>
	<view :class="{ Active: pageData.length }">
		<navBar title="案件代理" borBot>
			<template v-slot:right_Bar>
				<view class="iconfont icon-jiahao black size50 p-right10" @click="newTochat"></view>
			</template>
		</navBar>

		<view class="list" v-for="(item, index) in pageData" :key="index" @click="toChat(item.id)">
			<view class="lis">
				<text class="title">姓名:</text>
				<text class="name">{{ item.userName }}</text>
			</view>
			<view class="lis">
				<text class="title">联系电话:</text>
				<text class="name">{{ item.phone }}</text>
			</view>
			<view class="lis">
				<text class="title">委托律师:</text>
				<text class="name">{{ item.LawyerName }}</text>
			</view>
			<view class="stateStr" v-if="item.stateStr">{{ item.stateStr }}</view>
		</view>

		<view class="noList" v-if="!pageData.length">
			<image :src="staticImg('daili.png')" mode="aspectFill" class="DailiImg"></image>
			<text class="color-999 size28">暂无案件代理</text>
			<view class="newCreat" @click="newTochat">新建</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed, watch, nextTick, onUnmounted } from 'vue';
	import { onLoad, onShow, onReady } from '@dcloudio/uni-app';
	import { useMainStore } from '@/stores/index';
	import {
		toUrl,
		staticImg,
		imgUrls,
		Toast,
		chooseImage,
		uploadFile,
		previewImage,
		chooseMessageFile,
		getFileExtension,
		tampToDate,
		showLoading,
		hideLoading,
	} from '@/utils/utils.js';
	import Http from '@/utils/request.js';
	const pageNum = ref(1);
	const pageSize = ref(10);
	const getMore = ref(true);
	const pageData = ref([]);
	const orderType = ref(); // 1
	const mainStore = useMainStore();
	onLoad((opt) => {
		if (opt.orderType) orderType.value = opt.orderType;
		listAndIM();
	});

	const listAndIM = () => {
		showLoading('');
		Http.post({
			url: `/order/subItemOrderList`,
			data: {
				orderType: orderType.value,
				pageNum: pageNum.value,
				pageSize: pageSize.value,
			},
		}).then((res) => {
			hideLoading();
			if (res.code != 0) return Toast(res.msg);
			const result = res.rows || [];
			result.forEach((item) => {
				if (item.lastMessage && item.lastMessage.extend) {
					item.lastMessage.extend = JSON.parse(item.lastMessage.extend);
				}
			});
			pageNum.value == 1
				? (pageData.value = result)
				: (pageData.value = [...pageData.value, ...result]);
			if (result.length < pageSize.value) return (getMore.value = false);
		});
	};

	const toChat = (id) => {
		toUrl(`/pages/chat/chat?chatId=${id}`);
	};
	const newTochat = () => {
		toUrl(`/pages/chat/chat`);
	};
</script>

<style lang="scss" scoped>
	.Active {
		min-height: 100vh;
		background-color: #f9f9f9;
	}
	.list {
		width: 710rpx;
		background-color: #fff;
		padding: 20rpx;
		margin: 20rpx auto 0;
		border-radius: 10rpx;
		position: relative;
		.lis {
			display: flex;
			align-items: center;
			line-height: 60rpx;
			.title {
				width: 160rpx;
				color: #999999;
				font-size: 28rpx;
			}
			.name {
				color: #333;
				font-size: 28rpx;
			}
		}
		.stateStr {
			padding: 8rpx 16rpx;
			background-color: #edf5fe;
			color: $color_008;
			font-size: 22rpx;
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			border-radius: 10rpx;
		}
	}
	.noList {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 100rpx;
		.DailiImg {
			width: 400rpx;
			height: 400rpx;
		}
		.newCreat {
			width: 260rpx;
			height: 70rpx;
			background-color: $color_008;
			color: #fff;
			font-size: 28rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 30rpx;
		}
	}
</style>
